<style type="text/css">
    #menu_default_box{width:603px; height: 367px;margin:40px auto; }
    .menu_group{float:left;width:200px; height: 367px; }
    .menu_group_one{width:198px; height: 60px;text-align: center;}
    .input {float:left;margin:10px 5px; width: 140px; height: 40px;background: #ccc;font-size: 20px; text-align: center;  }
    .hidden_act2{float:left; margin-top:20px;display: none;}
</style>
<script type="text/javascript">
    function SubmitForm(){
    var result = checkForm();

    if(result){
            
            $.get("/Menu/handle_menu_data",result,function(data){
                var tmpArr = data.split(")");
                
                $("#"+result['targetObj']).val(result['name']);
                $("#"+result['targetObj']).attr("name",tmpArr[1]+"||"+result["pid"]+"||"+result["type"]+"||"+result["key"]+"||"+result["url"]+"||"+result["sort"]);
                CancleForm();
            });

    }else{
        alert("请完成表单后提交！");
    }
}

function CancleForm(){
  hidden_box();  
}

function checkForm(){
    var nameVal = $("#m_name").val();
    var typeVal = $("#m_type").val();
    var urlVal = $("#m_url").val();
    var keyVal = $("#m_key").val();
    var idVal = $("#m_id").val();
    var pidVal = $("#m_pid").val();
    var sortVal = $("#m_sort").val();
    var targetInputId = $("#m_targetObj").val();
    if(!(nameVal && typeVal && ( urlVal || keyVal))){
  
        return false;        
    }else{
        var result = {"id":idVal,"pid":pidVal,"name":nameVal,"type":typeVal,"key":keyVal,"url":urlVal,"sort":sortVal,"targetObj":targetInputId};
        
        return result;
    }
    
}
</script>


<div id="menu_default_box">

    <div class="menu_group" id="group-1">
        <volist name="group3" id="gp1">
            <div class="menu_group_one">
                <input type="text" value="{$gp1['name']}" attr="{$gp1['name']}" class="input" name="{$gp1['id']}||{$gp1['pid']}||{$gp1['type']}||{$gp1['key']}||{$gp1['url']}||{$i}"  id="gp1{$i}"/>
                <span class="hidden_act2" > </span>
                
            </div>
        </volist>
    </div>

    <div class="menu_group" id="group-2">
        <volist name="group2" id="gp2">
            <div class="menu_group_one">
                <input type="text" value="{$gp2['name']}" attr="{$gp2['name']}" class="input" name="{$gp2['id']}||{$gp2['pid']}||{$gp2['type']}||{$gp2['key']}||{$gp2['url']}||{$i}" id="gp2{$i}"/>
                <span class="hidden_act2" > </span>
            </div>
        </volist>
    </div>

    <div class="menu_group" id="group-3">
        <volist name="group1" id="gp3">
            <div class="menu_group_one">
                <input type="text" value="{$gp3['name']}" attr="{$gp3['name']}" class="input" name="{$gp3['id']}||{$gp3['pid']}||{$gp3['type']}||{$gp3['key']}||{$gp3['url']}||{$i}"  id="gp3{$i}"/>
                <span class="hidden_act2" > </span>
            </div>
        </volist>
    </div>

</div>



<!--Start of hidden table-->
<div id="hidden_box">
	<div class="hidden_box_content">
            
	<input type="hidden" value="" id="m_targetObj" />
	<input type="hidden" value="" id="m_id" />
                  <input type="hidden" value="" id="m_pid" />
	<table border="1" width="560" class="tab">
		<tbody>
		<tr valign="middle">			
			<th width="91" height="35"><b>标题名称：</b></th>
			<td><input type="text" value="" id="m_name"/></td>
		</tr>
		<tr>
			<th width="157"><b>标题链接：</b></th>
			<td><input type="text" value="" id="m_url"/></td>
		</tr>
		<tr>
			<th width="142"><b>标题类型：</b></th>
			<td><input type="text" value="" id="m_type"/><br/>
                                                                （Click交互事件填1，URL跳转事件填2）
                                                        </td>
		</tr>
		<tr>
			<th width="142"><b>标题KEY：</b></th>
			<td><input type="text" value="" id="m_key"/></td>
		</tr>
		<tr>
			<th width="142"><b>标题排序：</b></th>
			<td><input type="text" value="" id="m_sort" disabled="disabled"/></td>
		</tr>
		<tr>
                                    <th colspan="2" class="tc">
                                        <input type="button" class="mar_r_10" value="Submit" id="submit" onclick="SubmitForm()"/>
                                        <input type="button" class="mar_l_10" value="Cancel" id="cancel" onclick="CancleForm()"/>
                                    </th>
		<tr>
		</tr>       
	</tbody>
	</table>
	</div>
</div>

<!--End of hidden table-->
<script type="text/javascript" src="__PUBLIC__/js/startMove.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    

$(document).ready(function(){


    $(".input").each(function(i){

        $(this).focus(function(){
            $(this).css("background","white");
        });

        $(this).blur(function(){
            $(this).css("background","#ccc");
        });

        $(this).change(function(){
            var data=$(this).attr("name");
            var dataArr = data.split("||");
            var val = $(this).val();
            if(val.trim() =="" && dataArr[5] !=6){
                if(confirm("确认删除？")){
                    $.get("/Menu/del_menu",{id:dataArr[0]},function(){
                        $(this).val("")
                        $(this).attr("name","0||0||0||0||0||"+dataArr[5]);
                        
                    });
                }else{
                	$(this).val($(this).attr("attr"));
                }
            }else{
                
            }
            
        });

    });

    $(".menu_group_one").each(function(i){

        if(i==5 || i==11 || i ==17){
            var oInput = $(this).children(".input");
            if(!oInput.val()){
                oInput.attr("disabled","disabled");
            }
        }

        $(this).mouseover(function(){

            $(this).children(".hidden_act2").css("display","block");

        });


        $(this).mouseout(function(){

            $(this).children(".hidden_act2").css("display","none");
        })

        $(this).children(".hidden_act2").click(function(){

            var rootVal = $(this).parents(".menu_group").children(".menu_group_one").last().children(".input").val();

            if(!rootVal  && (i ==5 || i ==11 || i ==17)){
                var name = $(this).siblings(".input").val();
                var data = $(this).siblings(".input").attr("name");
                var dataArr = data.split("||");
                var sortVal;
                switch(i){
                    case 5:
                        sortVal = 3;
                        break;
                    case 11:
                        sortVal = 2;
                        break;
                    case 17:
                        sortVal = 1;
                        break;
                    default:
                        sortVal = dataArr[5];
                        break;
                }

                var targetInputTag = $(this).siblings(".input").attr("id");
                var dataJson = {"id":dataArr[0],"pid":dataArr[1],"name":name,"type":dataArr[2],"key":dataArr[3],"url":dataArr[4],"sort":sortVal,"targetObj":targetInputTag};
                show_box(dataJson);

            }else if(rootVal){

                if(!(i ==5 || i ==11 || i ==17)){

                    var name = $(this).siblings(".input").val();
                    var rootName = $(this).parents(".menu_group").children(".menu_group_one").last().children(".input").attr("name");

                    var rootNameArr = rootName.split("||");
                    var dataArr = $(this).siblings(".input").attr("name").split("||");

                    var targetInputTag = $(this).siblings(".input").attr("id");
                    var dataJson = {"id":dataArr[0],"pid":rootNameArr[0],"name":name,"type":dataArr[2],"key":dataArr[3],"url":dataArr[4],"sort":dataArr[5],"targetObj":targetInputTag};
                    show_box(dataJson);
                }else{
                    switch(i){
                        case 5:
                            sortVal = 3;
                            break;
                        case 11:
                            sortVal = 2;
                            break;
                        case 17:
                            sortVal = 1;
                    }                    
                     var name = $(this).siblings(".input").val();
                    var dataArr = $(this).siblings(".input").attr("name").split("||");
                    var targetInputTag = $(this).siblings(".input").attr("id");
                    var dataJson = {"id":dataArr[0],"pid":dataArr[1],"name":name,"type":dataArr[2],"key":dataArr[3],"url":dataArr[4],"sort":sortVal,"targetObj":targetInputTag};
                    show_box(dataJson);                    
                }
            }else{
                alert("请先添加根菜单！");
            }

        });

    });   
        
    })
    
    
    
</script>